<!--
 * @Author: early-autumn
 * @Date: 2020-05-21 11:44:45
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-17 15:37:48
-->
<template>
  <el-dialog
    title="新建看诊项目"
    :visible="value"
    width="680px"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="form" label-width="100px" :model="form" :rules="rules" inline>
      <el-row>
        <el-col>
          <el-form-item label="项目大类：" prop="firstCategory">
            <el-select
              v-model="form.firstCategory"
              style="width: 178px"
              placeholder="请选择项目大类"
            >
              <el-option
                v-for="option in entityOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="项目名称：" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入项目名称"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { entityAllOptions, entityOptions } from '@/utils/options'

const FORM_DATA = {
  firstCategory: undefined,
  name: undefined,
}

export default {
  name: 'CreateSeeingProject',
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 表单数据
      form: {},
      // 规则
      rules: {
        firstCategory: [
          { required: true, message: '项目大类不能为空', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    entityOptions() {
      return entityAllOptions
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.init()
      }
    },
  },
  methods: {
    init() {
      this.form = { ...FORM_DATA }
      this.resetForm('form')
    },
    /**
     * 关闭
     */
    handleClose() {
      this.$emit('close', false)
    },
    /**
     * 提交
     */
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleClose()
          this.$emit('submit', { ...this.form })
        }
      })
    },
  },
}
</script>

<style></style>
